<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for练习</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    #app {
        margin: 5rem auto;
        width: 50%;
    }
    
    table {
        width: 100%;
    }
    
    table,
    tr,
    td,
    th {
        border: 1px solid gray;
        border-collapse: collapse;
        text-align: center;
    }
    
    td,
    th {
        padding: 0.5rem;
    }
    
    tr:nth-child(2) {
        border-top: 1.5px solid gray;
    }
    
    p {
        font-size: 1.5rem;
    }
</style>

<body>
    <div id="app">
        <table>
            <tr>
                <th>编号</th>
                <th>图书名称</th>
                <th>出版时间</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>${{item.price}}</td>
                <td><button @click="add(index)">+</button> {{item.count}} <button @click="jian(index)" :disabled="item.count==0">-</button></td>
                <td><button @click="deletes(index)">移除</button></td>
            </tr>

        </table>
        <h2>总价: ${{sub|fixed}}</h2>
    </div>
    <script>
        var v_app = new Vue({
            el: "#app",
            data: {
                books: [{
                    id: 1,
                    name: "《圣兽之王》",
                    date: "2006-1",
                    price: 80,
                    count: 1,
                }, {
                    id: 2,
                    name: "《星露谷物语》",
                    date: "2006-2",
                    price: 8,
                    count: 0,
                }, {
                    id: 3,
                    name: "《2042》",
                    date: "2006-3",
                    price: 15,
                    count: 1,
                }, {
                    id: 4,
                    name: "《女神异闻录5》",
                    date: "2006-4",
                    price: 75,
                    count: 0,
                }, {
                    id: 5,
                    name: "《植物大战僵尸》",
                    date: "2006-5",
                    price: 6,
                    count: 0,
                }],
            },
            methods: {
                add(index) {
                    this.books[index].count++;
                },
                jian(index) {
                    this.books[index].count--;
                    // if (this.books[index].count > 0) {
                    //     this.books[index].count--;
                    // }
                },
                deletes(index) {
                    this.books.splice(index, 1);
                    // if (this.books.length > 0) {
                    //     this.books.splice(index, 1);
                    // }
                }
            },
            computed: {
                sub() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result = (this.books[i].price * this.books[i].count) + result;
                    }
                    return result;
                }
            },
            filters: {
                fixed(str) {
                    return Number(str).toFixed(2);
                }
            }
        });
    </script>
</body>

</html>